import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import Tabs from 'src/component/Tabs';
import { RootState } from 'src/redux/store';
import { bn } from 'src/util/bigNumber';
import style from './Report.module.scss';
import Statement from './Statement';

const ReportWithTabs = () => {
  const { t } = useTranslation();
  const [tab, setTab] = useState<number>(0);
  const { me, kids, members } = useSelector((rootState: RootState) => rootState.rebate);
  const labels = useMemo(() => {
    const res = ["个人"];
    if (kids && kids.length > 0) res.push("下级");
    if (members) res.push("团队");

    return res;
  }, [kids, members, t]);

  return (
    <>
      <Tabs labels={labels} onChange={(i) => setTab(i)} defaultIndex={0} />
      <div className={style.paper}>
        {tab === 0 && me && <Statement info={me} showCoin />}
        {tab === 1 &&
          kids &&
          kids.map((v, i) => <Statement key={v.FMail} info={v} showEmail showCoin={i === 0} />)}
        {tab === 2 && members && (
          <>
            <div className={style.proxy}>团队总计</div>
            <Statement
              info={{
                email: 'xx',
                userId: 'xx',
                SumSell: members
                  .reduce((sum, current) => sum.plus(bn(current.SumSell)), bn(0))
                  .toFormat(),
                SumDisc: members
                  .reduce((sum, current) => sum.plus(bn(current.SumDisc)), bn(0))
                  .toFormat(),
              }}
              showCoin
              showDivider={false}
            />
            <div className={style.darkDivider} />
            <div className={style.proxy}>{"下级"}</div>
            {kids && kids.map((v, i) => (
              <Statement key={v.FMail} info={v} showEmail showCoin={i === 0} />
            ))}
          </>
        )}
      </div>
    </>
  );
};

export default ReportWithTabs;
